<template>
  <div>
    <div class="Home-box Homepointer-eventsAct" v-loading="isShowLoading"
      :class="isShowLoading ? '' : 'Homepointer-eventsAct'" id="TwinContent"
      element-loading-background="rgba(122, 122, 122, 0.8)">
      <div class="Home_title"></div>
      <!-- 组件 -->
      <div class="Sidebar_box animate__animated" :class="SidebarAct ? 'animate__backInRight' : 'animate__backOutRight'"
        v-if="SidebarAct">
        <Sidebar />
      </div>
      <!-- 侧边按钮开启状态 -->
      <div class="SidebarBtnAct" v-if="SidebarAct" @click="addSidebarAct"></div>
      <!-- 侧边按钮关闭状态 -->
      <div class="SidebarBtnNoAct" v-if="!SidebarAct" @click="addSidebarAct"></div>
      <!-- 下拉框 -->
      <div class="Combo-Box">
        <Combo_Box />
      </div>
      <!-- 患者信息弹窗 -->
      <div class="PatientInformation-box" v-if="isShowPatientInformation">
        <PatientInformation @ClosePatientInformation="ClosePatientInformation" :BedId="BedId" />
      </div>
      <!-- 紫外线弹窗 -->
      <div class="ultraviolet-box" v-if="isShowultraviolet">
        <ultraviolet @CloseUltraviolet="CloseUltraviolet" :ziwaixianObj="ziwaixianObj" />
      </div>
      <!-- 门禁通行记录弹窗 -->
      <div class="accesscontrol-box" v-if="isShowaccesscontrol">
        <accesscontrol @clsoeAccesscontrol="clsoeAccesscontrol" :menjinObj="menjinObj" />
      </div>
      <!-- 摄像头弹窗 -->
      <div class="cameraBox-Box" v-if="isShowCameraBox">
        <cameraBox @closeCameraBox="closeCameraBox" :shexiangObj="shexiangObj" />
      </div>
      <!-- 身高体重仪弹窗 -->
      <div class="heightWeight-box" v-if="isShowheightWeight">
        <heightWeight @clsoeheightWeight="clsoeheightWeight" :shengaoObj="shengaoObj" />
      </div>
      <!-- 贴管机 -->
      <div class="PipeStickingMachine-box" v-if="isShowPipeStickingMachine">
        <PipeStickingMachine @clsoePipeStickingMachine="clsoePipeStickingMachine" :TieguanObj="TieguanObj" />
      </div>
      <!-- 生命体征小推车 -->
      <div class="handcart_box" v-if="isShowhandcart">
        <handcart @clsoehandcart="clsoehandcart" :xiaotuicheObj="xiaotuicheObj" />
      </div>
      <!-- 自助机 -->
      <div class="selfService-box" v-if="isShowselfService">
        <selfService @clsoeselfService="clsoeselfService" :ziZhuObj="ziZhuObj" />
      </div>
      <!-- 机器人任务信息 -->
      <div class="RobotInformation-box" v-if="isShowRobotInformation">
        <RobotInformation @clsoeRobotInformation="clsoeRobotInformation" :jiqirenObj="jiqirenObj" />
      </div>
      <!-- 药柜弹窗 -->
      <div class="Cabinets-box" v-if="isShowCabinets">
        <Cabinets @clsoeCabinets="clsoeCabinets" :yaoGuiObj="yaoGuiObj" />
      </div>
      <!-- 温湿度弹窗 -->
      <div class="wenshudu-box" v-if="isShowwenshudu">
        <wenshudu @clsoewenshudu="clsoewenshudu" :wenshiduObj="wenshiduObj" />
      </div>
      <div class="anniuBox">
        <div class="anniu1" :class="isActAn1 ? 'anniu1Act' : 'anniu1'" @click="addAnniu1()"></div>
        <div class="anniu2" :class="CocosMsg.toggleFullscreen ? 'anniu2' : 'anniu2Act'" @click="addAnniu2()"></div>
        <div class="anniu3" :class="isActAn3 ? 'anniu3Act' : 'anniu3'" @click="addAnniu3()"></div>
      </div>
    </div>
    <div class="iframeID_box">
      <iframe id="iframeID" :src="rtnIframeUrl(isShowPackaging)" scrolling="no" ref="iframe"></iframe>
    </div>
  </div>
</template>
<script setup>
  import { ref, onMounted, watch } from "vue"
  import autofit from "@/utils/autofit.js"
  import Sidebar from "@/components/Sidebar.vue"
  import PatientInformation from "@/components/PatientInformation.vue"
  import Combo_Box from "@/components/Combo_Box.vue"
  import ultraviolet from "@/components/ultraviolet.vue"
  import accesscontrol from "@/components/accesscontrol.vue"
  import cameraBox from "@/components/cameraBox.vue"
  import heightWeight from "@/components/heightWeight.vue"
  import PipeStickingMachine from "@/components/PipeStickingMachine.vue"
  import handcart from "@/components/handcart.vue"
  import selfService from "@/components/selfService.vue"
  import RobotInformation from "@/components/RobotInformation.vue"
  import Cabinets from "@/components/Cabinets.vue"
  import wenshudu from "@/components/wenshudu.vue"
  import "animate.css"
  import userStore from "@/store/index.js"

  const { CocosMsg } = userStore()
  let iframeWin = ref()
  const iframe = ref(null)
  const SidebarAct = ref(false)
  const addSidebarAct = () => {
    SidebarAct.value = !SidebarAct.value
  }
  const isShowLoading = ref(false)
  const isShowPackaging = ref(false) //是true的时候使用cocosMsg
  const rtnIframeUrl = (e) => {
    let url = ""
    if (e) {
      url = "http://172.30.29.86:8000"
    } else {
      url = "/web-mobile/index.html"
    }
    console.log(url)
    return url
  }
  // 接收消息
  onMounted(() => {
    autofit.init(
      {
        dw: 2560,
        dh: 1600,
        el: "#TwinContent",
        resize: true
        // ignore: [{ el: "#iframeID" }]
      },
      false
    ) // 可关闭控制台运行提示输出
    iframeWin = iframe.value.contentWindow
    window.Cocospublic = sendCocos //发消息的方法放到全局
    // 接收消息的方法
    if (isShowPackaging.value) {
      window.addEventListener("message", Cocosjiant)
    } else {
      window.receiveMessage = receiveMessage
    }
  })
  // cocos 发消息的方法
  const sendCocos = (msg) => {
    if (isShowPackaging.value) {
      iframeWin.postMessage({ Msg: msg }, "*")
    } else {
      iframeWin.receiveMessage({ Msg: msg })
    }
  }

  // 接收消息的方法
  const Cocosjiant = (data) => {
    console.log(data, "接收到的cococs的消息1111")
    console.log(data.data.Msg.MsgName, "接收到名字11111")
    CloseActTanchuang()
    // 患者信息弹窗
    if (data.data.Msg.MsgName == "PatientClicked") {
      console.log(data.data.Msg, "点击了患者监测")
      isShowPatientInformation.value = true
      isShowLoading.value = true
      // console.log(data.data.Msg.BedId)
      BedId.value = data.data.Msg.BedId
    } else if (data.data.Msg.MsgName == "UVClicked") {
      console.log(data.data.Msg, "点击了紫外线灯")
      isShowultraviolet.value = true
      isShowLoading.value = true
      ziwaixianObj.value = data.data.Msg
    } else if (data.data.Msg.MsgName == "CameraClicked") {
      console.log(data.data.Msg, "点击了摄像头")
      isShowCameraBox.value = true
      shexiangObj.value = data.data.Msg
    } else if (data.data.Msg.MsgName == "SGTZYClicked") {
      console.log(data.data.Msg, "点击了身高体重仪")
      isShowheightWeight.value = true
      shengaoObj.value = data.data.Msg
    } else if (data.data.Msg.MsgName == "TieGuanJiClicked") {
      console.log(data.data.Msg, "点击了贴管机")
      isShowPipeStickingMachine.value = true
      TieguanObj.value = data.data.Msg
    } else if (data.data.Msg.MsgName == "SMTZXTCClicked") {
      console.log(data.data.Msg, "点击了生命体征小推车")
      isShowhandcart.value = true
      xiaotuicheObj.value = data.data.Msg
    } else if (data.data.Msg.MsgName == "ZiZhuJiClicked") {
      console.log(data.data.Msg, "点击了自助机")
      isShowselfService.value = true
      ziZhuObj.value = data.data.Msg
    } else if (data.data.Msg.MsgName == "YaoGuiClicked") {
      console.log(data.data.Msg, "点击了药柜")
      isShowCabinets.value = true
      yaoGuiObj.value = data.data.Msg
    } else if (data.data.Msg.MsgName == "MenJinClicked") {
      console.log(data.data.Msg, "点击了门禁")
      isShowaccesscontrol.value = true
      menjinObj.value = data.data.Msg
    } else if (data.data.Msg.MsgName == "JiQiRenClicked") {
      console.log(data.data.Msg, "点击了机器人")
      isShowRobotInformation.value = true
      jiqirenObj.value = data.data.Msg
    } else if (data.Msg.MsgName == "EnvirClicked") {
      console.log(1302222, data.data.Msg, '接收到了温湿度')
      isShowwenshudu.value = true
      wenshiduObj.value = data.data.Msg
    } else if (data.data.Msg.MsgName == "UVStatusChange") {
      console.log('接收到了紫外线变化实时数据')
      // ziwaixianObj.value = data.data.Msg
      ziwaixianObj.value.Did = data.data.Msg.Did
      ziwaixianObj.value.DirectId = data.data.Msg.DirectId
      ziwaixianObj.value.Siid = data.data.Msg.Siid
    }
  }
  // 接收消息
  const receiveMessage = (data) => {
    console.log(data, "接收到的cococs的消息222222")
    console.log(data.Msg.MsgName, "接收到名字2222222")
    CloseActTanchuang()
    // 患者信息弹窗
    if (data.Msg.MsgName == "PatientClicked") {
      console.log(data.Msg, "点击了患者监测")
      isShowPatientInformation.value = true
      isShowLoading.value = true
      // console.log(data.data.Msg.BedId)
      BedId.value = data.Msg.BedId
    } else if (data.Msg.MsgName == "UVClicked") {
      console.log(1302222, data.Msg, "点击了紫外线灯")
      isShowLoading.value = true
      isShowultraviolet.value = true
      ziwaixianObj.value = data.Msg
    } else if (data.Msg.MsgName == "CameraClicked") {
      console.log(data.Msg, "点击了摄像头")
      isShowCameraBox.value = true
      shexiangObj.value = data.Msg
    } else if (data.Msg.MsgName == "SGTZYClicked") {
      console.log(data.Msg, "点击了身高体重仪")
      isShowheightWeight.value = true
      shengaoObj.value = data.Msg
    } else if (data.Msg.MsgName == "TieGuanJiClicked") {
      console.log(data.Msg, "点击了贴管机")
      isShowPipeStickingMachine.value = true
      TieguanObj.value = data.Msg
    } else if (data.Msg.MsgName == "SMTZXTCClicked") {
      console.log(data.Msg, "点击了生命体征小推车")
      isShowhandcart.value = true
      xiaotuicheObj.value = data.Msg
    } else if (data.Msg.MsgName == "ZiZhuJiClicked") {
      console.log(data.Msg, "点击了自助机")
      isShowselfService.value = true
      ziZhuObj.value = data.Msg
    } else if (data.Msg.MsgName == "YaoGuiClicked") {
      console.log(data.Msg, "点击了药柜")
      isShowCabinets.value = true
      yaoGuiObj.value = data.Msg
    } else if (data.Msg.MsgName == "MenJinClicked") {
      console.log(data.Msg, "点击了门禁")
      isShowaccesscontrol.value = true
      menjinObj.value = data.Msg
    } else if (data.Msg.MsgName == "JiQiRenClicked") {
      console.log(data.Msg, "点击了机器人")
      isShowRobotInformation.value = true
      jiqirenObj.value = data.Msg
    } else if (data.Msg.MsgName == "EnvirClicked") {
      console.log(1302222, data.Msg, '接收到了温湿度')
      isShowwenshudu.value = true
      wenshiduObj.value = data.Msg
    } else if (data.Msg.MsgName == "UVStatusChange") {
      console.log(1302222, data.Msg, '接收到了紫外线变化实时数据');
      ziwaixianObj.value = data.Msg
    }
  }
  const BedId = ref("") //cocos传消息
  const ziwaixianObj = ref({
    DeviceName: "",
    Did: "",
    DirectId: "",
    Siid: ""
  }) //cocos传消息
  const yaoGuiObj = ref({}) //cocos传消息
  const menjinObj = ref({}) //cocos传消息
  const TieguanObj = ref({}) //cocos传消息
  const ziZhuObj = ref({}) //cocos传消息
  const shexiangObj = ref({}) //cocos传消息
  const xiaotuicheObj = ref({}) //cocos传消息
  const jiqirenObj = ref({}) //cocos传消息
  const shengaoObj = ref({}) //cocos传消息
  const wenshiduObj = ref({}) //cocos传消息
  const CloseActTanchuang = () => {
    if (isShowPatientInformation.value) {
      isShowPatientInformation.value = false
    } else if (isShowCameraBox.value) {
      isShowCameraBox.value = false
    } else if (isShowheightWeight.value) {
      isShowheightWeight.value = false
    } else if (isShowPipeStickingMachine.value) {
      isShowPipeStickingMachine.value = false
    } else if (isShowhandcart.value) {
      isShowhandcart.value = false
    } else if (isShowselfService.value) {
      isShowselfService.value = false
    } else if (isShowCabinets.value) {
      isShowCabinets.value = false
    } else if (isShowaccesscontrol.value) {
      isShowaccesscontrol.value = false
    } else if (isShowRobotInformation.value) {
      isShowRobotInformation.value = false
    }else if (isShowwenshudu.value) {
      isShowwenshudu.value = false
    }
  }
  const isShowPatientInformation = ref(false)
  const ClosePatientInformation = () => {
    isShowPatientInformation.value = false
    isShowLoading.value = false
    window.Cocospublic({ MsgName: "TipClose" })
  }
  const isShowultraviolet = ref(false)
  const CloseUltraviolet = () => {
    isShowultraviolet.value = false
    isShowLoading.value = false
    window.Cocospublic({ MsgName: "TipClose" })

  }
  const isShowaccesscontrol = ref(false)
  const clsoeAccesscontrol = () => {
    isShowaccesscontrol.value = false
    window.Cocospublic({ MsgName: "TipClose" })

  }
  const isShowCameraBox = ref(false)
  const closeCameraBox = () => {
    isShowCameraBox.value = false
    window.Cocospublic({ MsgName: "TipClose" })

  }
  const isShowheightWeight = ref(false)
  const clsoeheightWeight = () => {
    isShowheightWeight.value = false
    window.Cocospublic({ MsgName: "TipClose" })

  }
  const isShowPipeStickingMachine = ref(false)
  const clsoePipeStickingMachine = () => {
    isShowPipeStickingMachine.value = false
    window.Cocospublic({ MsgName: "TipClose" })

  }
  const isShowhandcart = ref(false)
  const clsoehandcart = () => {
    isShowhandcart.value = false
    window.Cocospublic({ MsgName: "TipClose" })

  }
  const isShowselfService = ref(false)
  const clsoeselfService = () => {
    isShowselfService.value = false
    window.Cocospublic({ MsgName: "TipClose" })

  }
  const isShowRobotInformation = ref(false)
  const clsoeRobotInformation = () => {
    console.log('机器人关闭');
    isShowRobotInformation.value = false
    // setTimeout(() => {
    window.Cocospublic({ MsgName: "TipClose" })
    // }, 500)

  }
  const isShowCabinets = ref(false)
  const clsoeCabinets = () => {
    isShowCabinets.value = false
    window.Cocospublic({ MsgName: "TipClose" })
  }
  const isShowwenshudu = ref(false)
  const clsoewenshudu = () => {
    isShowwenshudu.value = false
    window.Cocospublic({ MsgName: "TipClose" })
  }

  const isActAn1 = ref(false)
  const isActAn2 = ref(false)
  const isActAn3 = ref(false)
  const addAnniu1 = () => {
    isActAn1.value = !isActAn1.value
    if (isActAn1.value) {
      console.log(isActAn1.value, "现在是3D")
      window.Cocospublic({ MsgName: "ProjectionChange", State: "3D" })
    } else {
      console.log(isActAn1.value, "现在是2D")
      window.Cocospublic({ MsgName: "ProjectionChange", State: "2D" })
    }
  }
  const addAnniu2 = () => {
    isActAn2.value = !isActAn2.value
    CocosMsg.updatetoggleFullscreen(isActAn2.value)
  }
  const addAnniu3 = () => {
    isActAn3.value = !isActAn3.value
  }

</script>

<style scoped lang="less">
  .iframeID_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    // z-index: 1;
    #iframeID {
      width: 100%;
      height: 100%;
      z-index: 1;
      // background-color: red;
    }
  }

  .Homepointer-eventsAct {
    pointer-events: none;
  }

  .Home-box {
    position: absolute;
    z-index: 20000;

    .anniuBox {
      pointer-events: all;
      z-index: 100 !important;
      position: absolute;
      top: 40px;
      right: 40px;
      width: 330px;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .anniu1 {
        cursor: pointer;
        width: 110px;
        height: 110px;
        background: url("@/assets/home/anniu11.png") no-repeat center;
        background-size: 100% 100%;
      }

      .anniu1Act {
        cursor: pointer;
        width: 110px;
        height: 110px;
        background: url("@/assets/home/anniu1.png") no-repeat center;
        background-size: 100% 100%;
      }

      .anniu2 {
        cursor: pointer;
        width: 110px;
        height: 110px;
        background: url("@/assets/home/anniu22.png") no-repeat center;
        background-size: 100% 100%;
      }

      .anniu2Act {
        cursor: pointer;
        width: 110px;
        height: 110px;
        background: url("@/assets/home/anniu2.png") no-repeat center;
        background-size: 100% 100%;
      }

      .anniu3 {
        cursor: pointer;
        width: 110px;
        height: 110px;
        background: url("@/assets/home/anniu33.png") no-repeat center;
        background-size: 100% 100%;
      }

      .anniu3Act {
        cursor: pointer;
        width: 110px;
        height: 110px;
        background: url("@/assets/home/anniu3.png") no-repeat center;
        background-size: 100% 100%;
      }
    }

    .Home_title {
      pointer-events: all;
      z-index: 1;
      position: absolute;
      width: 100%;
      height: 118px;
      background: url("@/assets/home/top.png") no-repeat center;
      background-size: 100% 100%;
    }

    .Sidebar_box {
      pointer-events: all;
      z-index: 1;
      width: 196px;
      height: 1293px;
      position: absolute;
      right: 113px;
      top: 165px;
    }

    .SidebarBtnAct {
      pointer-events: all;
      z-index: 1;
      cursor: pointer;
      width: 80px;
      height: 174px;
      background: url("@/assets/Sidebar/19.png") no-repeat center;
      background-size: 100% 100%;
      position: absolute;
      right: 16px;
      top: 713px;
    }

    .SidebarBtnNoAct {
      pointer-events: all;
      z-index: 1;
      cursor: pointer;
      width: 80px;
      height: 174px;
      background: url("@/assets/Sidebar/18.png") no-repeat center;
      background-size: 100% 100%;
      position: absolute;
      right: 16px;
      top: 713px;
    }

    .Combo-Box {
      pointer-events: all;
      z-index: 1;
      position: absolute;
      left: 40px;
      top: 40px;
      width: 382px;
      height: 98px;
    }

    .PatientInformation-box {
      pointer-events: all;
      z-index: 3000;
      width: 944px;
      height: 1278px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .ultraviolet-box {
      pointer-events: all;
      z-index: 3000;
      width: 1160px;
      height: 1320px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .accesscontrol-box {
      pointer-events: all;
      z-index: 3000;
      position: absolute;
      left: 36px;
      top: 120px;
      width: 872px;
      height: 1452px;
    }

    .cameraBox-Box {
      pointer-events: all;
      z-index: 3000;
      position: absolute;
      width: 814px;
      height: 654px;
      right: 566px;
      top: 561px;
    }

    .heightWeight-box {
      pointer-events: all;
      z-index: 3000;
      position: absolute;
      left: 36px;
      top: 120px;
      width: 872px;
      height: 1452px;
    }

    .PipeStickingMachine-box {
      pointer-events: all;
      z-index: 3000;
      position: absolute;
      left: 36px;
      top: 120px;
      width: 872px;
      height: 1452px;
    }

    .handcart_box {
      pointer-events: all;
      z-index: 3000;
      position: absolute;
      left: 36px;
      top: 120px;
      width: 872px;
      height: 1452px;
    }

    .selfService-box {
      pointer-events: all;
      z-index: 3000;
      position: absolute;
      left: 36px;
      top: 120px;
      width: 872px;
      height: 1452px;
    }

    .RobotInformation-box {
      pointer-events: all;
      z-index: 3000;
      position: absolute;
      left: 36px;
      top: 120px;
      width: 872px;
      height: 1452px;
    }

    .Cabinets-box {
      pointer-events: all;
      z-index: 3000;
      position: absolute;
      left: 36px;
      top: 120px;
      width: 872px;
      height: 1452px;
    }
    .wenshudu-box {
      pointer-events: all;
      z-index: 3000;
      position: absolute;
      left: 36px;
      top: 120px;
      width: 872px;
      height: 1452px;
    }
  }
</style>